<html>

<head>
    <title>HTML 文档结构</title>
</head>

<body>
    <div class="group">
            <input type="text" class="todovalue" name ="todovalueName" id="todovalueId" placeholder="input" 
                onkeydown="valueChange(event)"/>
            <input type="button" value="BUTTON2" onclick="handleClick()"></input>
            <button type="button" id="button3">经验加三</button>
        <div id="todoList">
            <div class="item" id="item0">
                <input class="item-chk" type="checkbox"/>
                <div class="item-sp">吃饭0</div>
                <input id="item-del-0" class="item-del" type="button" value="删除"
                onclick="handleDelClick(0)"></input>
            </div>
            <div class="item" id="item1">
                <input class="item-chk" type="checkbox"/>
                <div class="item-sp">吃饭1</div>
                <input id="item-del-1" class="item-del" type="button" value="删除"
                onclick="handleDelClick(1)"></input>
            </div>
            <div class="item" id="item2">
                <input class="item-chk" type="checkbox"/>
                <div class="item-sp">吃饭2</div>
                <input id="item-del-2" class="item-del" type="button" value="删除"
                onclick="handleDelClick(2)"></input>
            </div>
            <div class="item" id="item3">
                <input class="item-chk" type="checkbox"/>
                <div class="item-sp">吃饭3</div>
                <input id="item-del-3" class="item-del" type="button" value="删除"
                onclick="handleDelClick(3)"></input>
            </div>
        </div>
    </div>
</body>
<script lang="javascript">
    var index = 0;
    function init() {
        document.getElementById("button3").onclick = handleClick;
    }

    function valueChange(e){
        console.log(e);
        if(event.keyCode == 13){
            handleClick();
        }
    }

    function handleClick() {
        var temp = document.getElementsByName("todovalueName")[0].value;
        var div = document.createElement("div"); 
        div.innerText = temp;
        var t = "<div class='item' id='item"+index+ "'>"
            + "  <input class='item-chk' type='checkbox' />"
            + "  <div  class='item-sp'>" + temp + "</div>"
            + "  <input id='item-del-"+index+"' class='item-del' type='button' value='删除' onclick='handleDelClick("+index+")'></input>"
            + " </div>"
        index++;
        document.getElementById("todoList").innerHTML += t;
    }
    
    function handleDelClick(index){
        var arr = document.getElementById("todoList");
        console.log(arr);
        document.getElementById( "item"+ index).remove();
    }
    init();
</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }

    .group {
        border: 1px solid blue;
        padding: 10px;
        border-radius: 4px;
    }

    .item {
        margin: 3px;
        padding: 3px;
        border-radius: 4px;
        display: flex;
        align-items: center;
    }
    .item:hover{
        background-color: aqua;
        transform: scale(1.2);
    }

    .item-sp {
        flex-grow: 1;
    }

    .item-del {
        background-color: red;
        border: 0px;
        color: aliceblue;
        opacity: 0;
    }
    .item:hover .item-del{
        opacity: 1;
    }


    .todovalue{
        border: 2px solid #333333;
        padding: 6px;
        outline: none;
    }
    .todovalue:focus{
        box-shadow: 0px 0px 9px #4086cd;
        border: 2px solid #4086cd;
        outline: none;
    }
</style>

</html>